<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="./css/login.css"/>
		<script type="text/javascript">
			window.onload=function(){
			var btn=document.querySelector("button");
			btn.onclick=function(){
				var box=document.querySelector(".box");
				box.style.display="flex";
			}	
			var close=document.querySelector(".close");
			close.onclick=function(){
				var box =document.querySelector(".box");
				box.style.display="none";
			}
			}
		</script>
      <style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			body, .box{
				width: 100%;
				height: 600px;
				
			}
			body{
				position: relative;
			}
			.box{
				position: absolute;
				top: 0;
				left: 0;
				background-color: rgba(0,0,0,0.333);
				display: flex;
				justify-content: space-around;
				align-items: center;
				display: none;
			}
			.box .content .close{
				float: right;
				width: 16px;
				display: block;
			}
			.box .content{
				width: 750px;
				height: 300px;
				background-color: white;
			}
			

		</style>
	</head>
	<body>
		<button type="button">显示登陆框</button>
	<div class="box">
		<div class="content">
			<span class="close">&times;</span>
		</div>
	</div>
	</body>
</html>
